<template>
	<view class="toView">
		<view class="header">
			<image src="../../../static/img/headFeature/information/information1@2x.png"></image>
			<view class="information">
				<view class="top">
					<view>会员：{{userInforDetail.realName || ''}}</view>
					<view>年龄：{{userInforDetail.age+'岁' || ''}}</view>
					<view>性别：{{userInforDetail.sex == 1 ? '男' : userInforDetail.sex == 2 ? '女' : '未知'}}</view>
				</view>
				<view class="bottom">
					<view v-if="userInforDetail.sources == 3">签发人：{{userInforDetail.healthName || ''}}</view>
					<view v-if="userInforDetail.sources == 1">记录人：{{userInforDetail.realName || ''}}</view>
					<view>签发日期：{{userInforDetail.updateTime || ''}}</view>
				</view>
			</view>
		</view>
		<view class="two"></view>
		<view class="three"></view>
		
		<view class="mainContent">
			<!-- 基本信息 -->
			<view class="informationBox">
				<view class="boxOne">
					<image src="../../../static/img/headFeature/information/information2@2x.png"></image>
				</view>
				<view class="boxTwo">
					<view class="item">
						<text>身份证号</text>
						<view>{{userInforDetail.idCard  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>姓名</text>
						<view>{{userInforDetail.realName  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>性别</text>
						<view>{{userInforDetail.sex == 1 ? '男' : userInforDetail.sex == 2 ? '女' : '未知'}}</view>
					</view>
					<view class="item">
						<text>出生日期</text>
						<view>{{userInforDetail.birthday || '未填写'}}</view>
					</view>
					<view class="item">
						<text>年龄</text>
						<view>{{userInforDetail.age  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>手机号</text>
						<view>{{userInforDetail.phone  || '未填写'}}</view>
					</view>
				</view>
			</view>
			
			<!-- 其他信息 -->
			<view class="informationBox">
				<view class="boxOne">
					<image src="../../../static/img/headFeature/information/information3@2x.png"></image>
				</view>
				<view class="boxTwo">
					<view class="item">
						<text>民族</text>
						<view>{{userInforDetail.nation || '未填写'}}</view>
					</view>
					<view class="item">
						<text>工作单位</text>
						<view>{{userInforDetail.employer || '未填写'}}</view>
					</view>
					<view class="item">
						<text>紧急联系人</text>
						<view>{{userInforDetail.emergencyContactName || '未填写'}}</view>
					</view>
					<view class="item">
						<text>紧急联系人电话</text>
						<view>{{userInforDetail.emergencyContactPhone || '未填写'}}</view>
					</view>
					<view class="item">
						<text>血型</text>
						<view>{{userInforDetail.bloodGroup || '未填写'}}</view>
					</view>
					<view class="item">
						<text>文化程度</text>
						<view>{{userInforDetail.educationLevel || '未填写'}}</view>
					</view>
					<view class="item">
						<text>职业</text>
						<view>{{userInforDetail.occupation || '未填写'}}</view>
					</view>
					<view class="item">
						<text>婚姻状况</text>
						<view>{{userInforDetail.maritalStatus || '未填写'}}</view>
					</view>
					<view class="item">
						<text>医疗费用支付</text>
						<view>{{userInforDetail.medicalExpensesType || '未填写'}}</view>
					</view>
				</view>
			</view>
			
			<!-- 健康信息 -->
			<view class="informationBox">
				<view class="boxOne">
					<image src="../../../static/img/headFeature/information/information4@2x.png"></image>
				</view>
				<view class="boxTwo">
					<view class="item">
						<text>药物过敏史</text>
						<view v-if="userInforDetail.drugAllergy">
							<text  v-for="(item,index) in userInforDetail.drugAllergy":key="index">{{item}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
					<view class="item">
						<text>暴露史</text>
						<view v-if="userInforDetail.exposureHistory">
							<text  v-for="(item,index) in userInforDetail.exposureHistory":key="index">{{item}}</text>
							<!-- <view>{{userInforDetail.exposureHistory || '无'}}</view> -->
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
					<view>
						<view class="item" v-for="(item,index) in userInforDetail.pastHistory && JSON.parse(userInforDetail.pastHistory)" :key="'a'+index" style="display: unset;">
							<text style="font-weight: bold;	">{{item.name}}</text>
							<div>
								<view v-for="(a,ai) in item.parameterValueRes && item.parameterValueRes" :key="ai" style="display: flex;">
									<view style="text-indent: 1em;">{{a.name}}</view>
									<view>{{a.value}}</view>
								</view>
							</div>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 家族史 -->
			<view class="informationBox">
				<view class="boxOne">
					<image src="../../../static/img/headFeature/information/information5@2x.png"></image>
				</view>
				<view class="boxTwo">
					<view class="item" v-for="(item,aindex) in userInforDetail.familyHistory && JSON.parse(userInforDetail.familyHistory)" :key="'b'+aindex">
						<text>{{item.name}}</text>
						<view>
							<text>{{(item.parameterValueRes && item.parameterValueRes.map((a)=>{return a.value}).join(',') || '无')}}</text>
						</view>
					</view>
					<view class="item">
						<text>遗传病史</text>
						<view>
							<text>{{userInforDetail.geneticDisease || '无'}}</text>
						</view>
					</view>
					
					<view class="item">
						<text>残疾情况</text>
						<view v-if="userInforDetail.disability">
							<text v-for="(item,index) in userInforDetail.disability":key="index">{{item.substr(0,item.length - 1)}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {getUrlParam,filterData2} from '@/static/js/filter.js';
	export default {
		data() {
			return {
				userInforDetail: {},
			}
		},
		methods: {
			filterData2,
		},
		created() {
			const id = getUrlParam('id');
			if(id) {
				this.$api.memberUserInfoDetail(id).then((res) => {
					if(res.data.returnCode == '200') {
						this.userInforDetail = res.data.result;
						this.userInforDetail.updateTime = res.data.result.updateTime
						// this.userInforDetail.drugAllergy = res.data.result.drugAllergy && res.data.result.drugAllergy.split(',').map((a)=>{return a});
						// this.userInforDetail.exposureHistory = res.data.result.exposureHistory && res.data.result.exposureHistory.split(',').map((a)=>{return a});
						// var pastHistory = []
						// JSON.parse(res.data.result.pastHistory).map((a)=>{
						// 	a.parameterValueRes && a.parameterValueRes.map(b=>{
						// 		pastHistory.push(b)
						// 	})
						// })
						// this.userInforDetail.pastHistory = pastHistory			
						// this.userInforDetail.familyHistory = JSON.parse(res.data.result.familyHistory).map((a)=>{
						// 	return a	
						// })
						// var fatherArr = [];
						// this.userInforDetail.father = this.userInforDetail.familyHistory &&this.userInforDetail.familyHistory[0].parameterValueRes.map(a => {
						// 	if(a.value != '' && a.value) {
						// 		return fatherArr.push(a.value+',')
						// 	} else {
						// 		return fatherArr.push('无')
						// 	}
						// });
						// this.userInforDetail.fatherArr = fatherArr	
						
						// var montherArr = [];
						// this.userInforDetail.montherArr = this.userInforDetail.familyHistory &&this.userInforDetail.familyHistory[1].parameterValueRes.map(a => {
						// 	if(a.value != '') {
						// 		return montherArr.push(a.value+',')
						// 	} else {
						// 		return montherArr.push('无')
						// 	}
						// });
						// this.userInforDetail.montherArr = montherArr	
						
						// var sisterArr = [];
						// this.userInforDetail.sisterArr = this.userInforDetail.familyHistory &&this.userInforDetail.familyHistory[2].parameterValueRes.map(a => {
						// 	if(a.value != '') {
						// 		return sisterArr.push(a.value+',')
						// 	} else {
						// 		return sisterArr.push('无')
						// 	}
						// });
						// this.userInforDetail.sisterArr = sisterArr
						
						// var sonArr = [];
						// this.userInforDetail.sonArr = this.userInforDetail.familyHistory &&this.userInforDetail.familyHistory[3].parameterValueRes.map(a => {
						// 	if(a.value != '') {
						// 		return sonArr.push(a.value+',')
						// 	} else {
						// 		return sonArr.push('无')
						// 	}
						// });
						// this.userInforDetail.sonArr = sonArr
						
						this.userInforDetail.disability = res.data.result.disability && res.data.result.disability.split(',').map((a)=>{return a+','});
						// this.userInforDetail.geneticDisease = res.data.result.geneticDisease && res.data.result.geneticDisease.split(',').map((a)=>{return a+','});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toView {
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		padding: 26upx 0 88upx;
		.header {
			background: url(../../../static/img/quickly/information/bj3@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 702upx;
			height: 256upx;
			margin: 0 24upx;	
			z-index: 10;
			image {
				width: 622upx;
				height: 48upx;
				margin: 0 auto 44upx;
				display: block;
				padding-top: 27upx;
			}
			.information {
				width: 100%;
				padding: 0 42upx;
				box-sizing: border-box;
				.top,.bottom {
					display: flex;
					align-items: center;
					justify-content: space-around;
					view {
						color: #FFFFFF;
						font-weight: 30upx;
						margin-right: 25upx;
					}
					view:last-child {
						margin-right: 0;
					}
				}
				.bottom {
					margin-top: 20upx;
				}
			}
		}
		.two {
			background: url(../../../static/img/quickly/information/bj2@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 602upx;
			height: 254upx;
			margin: -222upx auto 0;
		}
		.three {
			background: url(../../../static/img/quickly/information/bj1@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 508upx;
			height: 254upx;
			margin: -226upx auto 0;
		}
		
		.mainContent {
			margin: 35upx 24upx 0;
			width: 702upx;
			.informationBox {
				margin-top: 33upx;
				.boxOne {
					width: 702upx;
					height: 302upx;
					background: #38CB97;
					border-radius: 24upx;
					padding: 18upx 0 0;
					box-sizing: border-box;
					image {
						width: 424upx;
						height: 38upx;
						display: block;
						margin: 0 auto;
					}
				}
				.boxTwo {
					width: 702upx;
					height: 100%;
					background: #FFFFFF;
					border-radius: 24upx;
					margin-top: -226upx;
					padding: 50upx 34upx;
					.item {
						display: flex;
						line-height: 62upx;
						color: #333333;
						font-size: 30upx;
						text{
							width: 280upx;
						}
						view {
							flex: 2;
						}
					}
				}
			}
		}
		.oneBox {
				width: 100%;
		}
		.pastHistory {
			display: flex;
			
			text {
				width: 100upx;
			}
			.twoBox {
				flex: 1;
			}
		}
	}
</style>
